<div class="content-section introduction">
    <div class="feature-intro">
        <h1>FileUpload</h1>
        <p>FileUpload is an advanced uploader with drag and drop support, multi file uploads, auto uploading, progress tracking and
            validations.</p>
    </div>
    <app-demoActions github="fileupload"></app-demoActions>
</div>

<div class="content-section implementation">
    <p-toast></p-toast>

    <div class="card">
        <h5>Advanced</h5>
        <p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
                multiple="multiple" accept="image/*" maxFileSize="1000000">
                <ng-template pTemplate="content">
                    <ul *ngIf="uploadedFiles.length">
                        <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                    </ul>
                </ng-template>
        </p-fileUpload>

        <h5>Basic</h5>
        <p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)"></p-fileUpload>

        <h5>Basic with Auto</h5>
        <p-fileUpload #fubauto mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUploadAuto($event)" [auto]="true" chooseLabel="Browse"></p-fileUpload>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;FileUploadModule&#125; from 'primeng/fileupload';
import &#123;HttpClientModule&#125; from '@angular/common/http';
</app-code>

            <h5>Getting Started</h5>
            <p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fileUpload name="myfile[]" url="./upload.php"&gt;&lt;/p-fileUpload&gt;
</app-code>

            <h5>Multiple Uploads</h5>
            <p>Only one file can be selected at a time, to allow selecting multiples enable <i>multiple</i> option.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"&gt;&lt;/p-fileUpload&gt;
</app-code>

            <h5>DragDrop</h5>
            <p>File selection can also be done by dragging and dropping one or more files to the content section of the component.</p>

            <h5>Auto Uploads</h5>
            <p>When auto property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
        accept="image/*" [auto]="true"&gt;&lt;/p-fileUpload&gt;
</app-code>

            <h5>File Types</h5>
            <p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded.
            Read more about other possible values <a href="http://www.w3schools.com/tags/att_input_accept.asp">here</a>.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
        accept="image/*"&gt;&lt;/p-fileUpload&gt;
</app-code>

            <h5>File Size</h5>
            <p>Maximum file size can be restricted using <i>maxFileSize</i> property defined in bytes.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
        accept="image/*" maxFileSize="1000000"&gt;&lt;/p-fileUpload&gt;
</app-code>

            <p>In order to customize the default messages use <i>invalidFileSizeMessageSummary</i> and <i>invalidFileSizeMessageDetail</i> options.
            In summary &#123;0&#125; placeholder refers to the filename and in detail, file size.</p>
            <ul>
                <li>invalidFileSizeMessageSummary: '&#123;0&#125;: Invalid file size, '</li>
                <li>invalidFileSizeMessageDetail: string = 'maximum upload size is &#123;0&#125;.'</li>
            </ul>

            <h5>Templating</h5>
            <p>File list UI is customizable using a ng-template called "file" that gets the <a href="https://www.w3.org/TR/FileAPI/">File</a> instance as the implicit variable.
                Second ng-template named "content" can be used to place custom content inside the content section which would be useful to implement a user interface to manage the uploaded files such as removing them. This
                template gets the selected files as the implicit variable. Third and final ng-template option is "toolbar" to display custom content at toolbar.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
        accept="image/*" maxFileSize="1000000"&gt;
        &lt;ng-template pTemplate="toolbar"&gt;
            &lt;div&gt;Upload 3 Files&lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;ng-template let-file pTemplate="file"&gt;
            &lt;div&gt;Custom UI to display a file&lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="content" let-files&gt;
            &lt;div&gt;Additional content.&lt;/div&gt;
        &lt;/ng-template&gt;
&lt;/p-fileUpload&gt;
</app-code>

            <h5>Request Customization</h5>
            <p>Internally, FileUpload uses Angular's HttpClient module so you may take advantage of the built-in features such interceptors and header customization.</p>

            <h5>Basic UI</h5>
            <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)" [auto]="true"&gt;&lt;/p-fileUpload&gt;
</app-code>

            <h5>Custom Upload</h5>
            <p>Uploading implementation can be overridden by enabling customUpload property and defining a custom upload handler event.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fileUpload name="myfile[]" [customUpload]="true" (uploadHandler)="myUploader($event)"&gt;&lt;/p-fileUpload&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
myUploader(event) &#123;
    //event.files == files to upload
&#125;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>name</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Name of the request parameter to identify the files at backend.</td>
                        </tr>
                        <tr>
                            <td>url</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Remote url to upload the files.</td>
                        </tr>
                        <tr>
                            <td>method</td>
                            <td>string</td>
                            <td>post</td>
                            <td>HTTP method to send the files to the url such as "post" and "put".</td>
                        </tr>
                        <tr>
                            <td>multiple</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Used to select multiple files at once from file dialog.</td>
                        </tr>
                        <tr>
                            <td>accept</td>
                            <td>string</td>
                            <td>false</td>
                            <td>Pattern to restrict the allowed file types such as "image/*".</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Disables the upload functionality.</td>
                        </tr>
                        <tr>
                            <td>auto</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, upload begins automatically after selection is completed.</td>
                        </tr>
                        <tr>
                            <td>maxFileSize</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum file size allowed in bytes.</td>
                        </tr>
                        <tr>
                            <td>fileLimit</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum number of files that can be uploaded.</td>
                        </tr>
                        <tr>
                            <td>invalidFileSizeMessageSummary</td>
                            <td>string</td>
                            <td>"&#123;0&#125;: Invalid file size, "</td>
                            <td>Summary message of the invalid file size.</td>
                        </tr>
                        <tr>
                            <td>invalidFileSizeMessageDetail</td>
                            <td>string</td>
                            <td>"maximum upload size is &#123;0&#125;."</td>
                            <td>Detail message of the invalid file size.</td>
                        </tr>
                        <tr>
                            <td>invalidFileTypeMessageSummary</td>
                            <td>string</td>
                            <td>"&#123;0&#125;: Invalid file type, "</td>
                            <td>Summary message of the invalid file type.</td>
                        </tr>
                        <tr>
                            <td>invalidFileLimitMessageDetail</td>
                            <td>string</td>
                            <td>"limit is &#123;0&#125; at most."</td>
                            <td>Detail message of the invalid file type.</td>
                        </tr>
                        <tr>
                            <td>invalidFileLimitMessageSummary</td>
                            <td>string</td>
                            <td>"Maximum number of files exceeded, "</td>
                            <td>Summary message of the invalid file type.</td>
                        </tr>
                        <tr>
                            <td>invalidFileTypeMessageDetail</td>
                            <td>string</td>
                            <td>"allowed file types: &#123;0&#125;."</td>
                            <td>Detail message of the invalid file type.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>previewWidth</td>
                            <td>number</td>
                            <td>50</td>
                            <td>Width of the image thumbnail in pixels.</td>
                        </tr>
                        <tr>
                            <td>chooseLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Label of the choose button. Defaults to global value in i18n translation configuration.</td>
                        </tr>
                        <tr>
                            <td>uploadLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Label of the upload button. Defaults to global value in i18n translation configuration.</td>
                        </tr>
                        <tr>
                            <td>cancelLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Label of the cancel button. Defaults to global value in i18n translation configuration.</td>
                        </tr>
                        <tr>
                            <td>chooseIcon</td>
                            <td>string</td>
                            <td>pi pi-plus</td>
                            <td>Icon of the choose button.</td>
                        </tr>
                        <tr>
                            <td>uploadIcon</td>
                            <td>string</td>
                            <td>pi pi-upload</td>
                            <td>Icon of the upload button.</td>
                        </tr>
                        <tr>
                            <td>cancelIcon</td>
                            <td>string</td>
                            <td>pi pi-times</td>
                            <td>Icon of the cancel button.</td>
                        </tr>
                        <tr>
                            <td>withCredentials</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
                        </tr>
                        <tr>
                            <td>mode</td>
                            <td>string</td>
                            <td>advanced</td>
                            <td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
                        </tr>
                        <tr>
                            <td>customUpload</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback.</td>
                        </tr>
                      <tr>
                            <td>showUploadButton</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Defines the visibility of upload button for Client-side FileUpload.</td>
                        </tr>
                        <tr>
                            <td>showCancelButton</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Defines the visibility of cancel button for Client-side FileUpload.</td>
                        </tr>
                        <tr>
                            <td>files</td>
                            <td>array</td>
                            <td>null</td>
                            <td>List of files to be provide to the FileUpload externally.</td>
                        </tr>
                        <tr>
                            <td>headers</td>
                            <td>HttpHeaders</td>
                            <td>null</td>
                            <td>HttpHeaders class represents the header configuration options for an HTTP request.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onBeforeUpload</td>
                            <td>event.formData: FormData object.</td>
                            <td>Callback to invoke before file upload is initialized.</td>
                        </tr>
                        <tr>
                            <td>onSend</td>
                            <td>event.originalEvent: Http Event <br>
                                event.formData: FormData object.</td>
                            <td>An event indicating that the request was sent to the server. Useful when a request may be retried multiple times, to distinguish between retries on the final event stream.</td>
                        </tr>
                        <tr>
                            <td>onUpload</td>
                            <td>event.originalEvent: Http Event<br />
                                event.files: Uploaded files.</td>
                            <td>Callback to invoke when file upload is complete.</td>
                        </tr>
                        <tr>
                            <td>onError</td>
                            <td>event.files: Files that are not uploaded.<br />
                                event.error: Request Error.</td>
                            <td>Callback to invoke if file upload fails.</td>
                        </tr>
                        <tr>
                            <td>onClear</td>
                            <td>-</td>
                            <td>Callback to invoke when files in queue are removed without uploading using clear all button.</td>
                        </tr>
                        <tr>
                            <td>onRemove</td>
                            <td>event.originalEvent: Original browser event. <br />
                                event.file: Selected file.</td>
                            <td>Callback to invoke when a file is removed without uploading using clear button of a file.</td>
                        </tr>
                        <tr>
                            <td>onSelect</td>
                            <td>event.originalEvent: Original browser event. <br />
                                event.files: Selected files of the select event.
                                event.currentFiles: All files to be uploaded.</td>
                            <td>Callback to invoke when files are selected.</td>
                        </tr>
                        <tr>
                            <td>onProgress</td>
                            <td>event.originalEvent: Original browser event. <br />
                                event.progress: Calculated progress value.</td>
                            <td>Callback to invoke when files are being uploaded.</td>
                        </tr>
                        <tr>
                            <td>uploadHandler</td>
                            <td>event.files: List of selected files.</td>
                            <td>Callback to invoke in custom upload mode to upload the files manually.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Methods</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>upload</td>
                            <td>-</td>
                            <td>Uploads the selected files.</td>
                        </tr>
                        <tr>
                            <td>clear</td>
                            <td>-</td>
                            <td>Clears the files list.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>file</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>content</td>
                            <td>$implicit: files</td>
                        </tr>
                        <tr>
                            <td>toolbar</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-fileupload</td>
                            <td>Container element</td>
                        </tr>
                        <tr>
                            <td>p-fileupload-buttonbar</td>
                            <td>Header containing the buttons</td>
                        </tr>
                        <tr>
                            <td>p-fileupload-content</td>
                            <td>Content section</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/fileupload" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast&gt;&lt;/p-toast&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Advanced&lt;/h5&gt;
    &lt;p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
            multiple="multiple" accept="image/*" maxFileSize="1000000"&gt;
            &lt;ng-template pTemplate="content"&gt;
                &lt;ul *ngIf="uploadedFiles.length"&gt;
                    &lt;li *ngFor="let file of uploadedFiles"&gt;{{file.name}} - {{file.size}} bytes&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/ng-template&gt;
    &lt;/p-fileUpload&gt;

    &lt;h5&gt;Basic&lt;/h5&gt;
    &lt;p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUpload($event)"&gt;&lt;/p-fileUpload&gt;

    &lt;h5&gt;Basic with Auto&lt;/h5&gt;
    &lt;p-fileUpload #fubauto mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize="1000000" (onUpload)="onBasicUploadAuto($event)" [auto]="true" chooseLabel="Browse"&gt;&lt;/p-fileUpload&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class FileUploadDemo &#123;

    uploadedFiles: any[] = [];

    constructor(private messageService: MessageService) &#123;&#125;

    onUpload(event) &#123;
        for(let file of event.files) &#123;
            this.uploadedFiles.push(file);
        &#125;

        this.messageService.add(&#123;severity: 'info', summary: 'File Uploaded', detail: ''&#125;);
    &#125;
&#125;
</app-code>
        </p-tabPanel>
    </p-tabView>
</div>
